<template>
  <div>
    <h2>修改用户信息</h2>
    <el-form :model="form" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.pwd" show-password />
      </el-form-item>
      <el-form-item>
        <el-upload
          class="avatar-uploader"
          action="http://localhost:4000/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { getuser, updateuser } from "../../../api/UserApi";
import { ElMessage, ElNotification } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

// 上传成功的回调
const handleAvatarSuccess: any["onSuccess"] = (
  response: any,
  uploadFile: { raw: Blob | MediaSource }
) => {
  // form.value.avatar = URL.createObjectURL(uploadFile.raw!);
  form.value.avatar = response.avatar;
};

const beforeAvatarUpload: any["beforeUpload"] = (rawFile: {
  type: string;
  size: number;
}) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

// 表单的数据
const form = ref({
  name: "",
  pwd: "",
  avatar: "",
});

// 用户id
let uid = localStorage.getItem("uid");

onMounted(() => {
  render();
});

const render = () => {
  getuser(uid).then((res) => {
    form.value.name = res.data.data[0].name;
    form.value.pwd = res.data.data[0].pwd;
    form.value.avatar = res.data.data[0].img;
  });
};

// 点击确定执行的函数
const onSubmit = () => {
  console.log({ ...form.value });
  let obj = {
    id: uid,
    ...form.value,
  };
  updateuser(obj).then((res) => {
    if (res.data.code == 1) {
      render();
      ElNotification({
        title: "提示",
        message: "修改用户信息成功！",
        type: "success",
      });
      router.go(-1);
    }
  });
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
h2 {
  margin-left: 60px;
  font-size: 30px;
  color: #8c939d;
}
.el-input {
  width: 300px;
}
</style>